<template>
  <div class="app-container">
    <div class="searchBox">
      <el-form ref="searchForm" :inline="true" :model="search">
        <el-form-item label="部门" prop="departmentId">
          <el-select v-model="search.departmentId" placeholder="请选择报销部门" clearable filterable>
            <el-option
              v-for="item in controlData.depOptions"
              :key="item.id"
              :label="item.text"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="报销人" prop="applicant">
          <el-select v-model="search.applicantUserId" placeholder="请选择报销人" clearable filterable>
            <el-option
              v-for="item in controlData.userOptions"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="申请日期" prop="applicationDate">
          <el-date-picker
            v-model="search.applicationDate"
            clearable
            size="small"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择申请日期"
          />
        </el-form-item>
        <el-form-item label="流程状态" prop="status">
          <el-select v-model="search.status" placeholder="请选择" clearable>
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item style="margin-top: -2px">
          <el-button type="primary" @click="searchQuery">查询</el-button>
          <el-button
            type="info"
            @click="
              search = {};
              searchQuery();
            "
          >重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <qm-table
      ref="qmTable"
      :data="query"
      keyProp="reimbursementId"
      menuType="text"
      :showAdd="false"
      :showEdit="false"
      :showOrder="true"
      :showCheckbox="false"
      :showDelete="false"
      :showView="false"
    >
      <qm-table-column field="applicationDate" fieldType="date">日期</qm-table-column>
      <qm-table-column field="applicant">报销人</qm-table-column>
      <qm-table-column field="departmentName">部门</qm-table-column>
      <!-- 借款金额（基本信息-原借款）、合计（基本信息-退/补）、报销金额（发票清单-总金额） -->
      <qm-table-column field="originalLoan" fieldType="number">借款金额</qm-table-column>
      <qm-table-column field="refund" fieldType="number">报销金额</qm-table-column>
      <qm-table-column title="合计" fieldType="number">
        <template v-slot:content="{ row }">{{row.refund-row.originalLoan}}</template>
        <!-- 报销金额-借款金额 -->
      </qm-table-column>
      <qm-table-column field="invoiceTotalAmount" fieldType="number">发票金额</qm-table-column>
      <qm-table-column field="status" width="120">状态</qm-table-column>

      <template v-slot:toolbar>
        <el-button type="primary" @click="toInvoiceApply">发起发票报销申请</el-button>
      </template>

      <template v-slot:moreBtn="{ row }">
        <el-button type="text" @click="processOn(row)">查看</el-button>
      </template>
    </qm-table>
  </div>
</template>

<script>
import Controller from "@/libs/framework/controller";

export default class Instance extends Controller {
  onBeforeInit() {
    this.urls = {
      model: "/eip/reimbursement/getListModel",
      query: "/eip/reimbursement/query",
    };
  }

  mixin() {
    return {
      data() {
        return {
          statusOptions: [
            {
              value: "办理中",
              label: "办理中",
            },
            {
              value: "已办结",
              label: "已办结",
            },
            {
              value: "已终止",
              label: "已终止",
            },
          ],
        };
      },
      methods: {
        toInvoiceApply() {
          const url = `/eip/reimbursement/create?action=processStart&appCode=InvoiceApply&_r=${new Date().getTime()}`;
          this.$root.openModal(url, () => {
            this.fetchData();
          });
        },
        processOn(row) {
          this.getWorkflowArgs({ formId: row.reimbursementId }).then((rlt) => {
            var taskId;
            if (rlt.historyTaskId) {
              taskId = rlt.historyTaskId;
            } else {
              taskId = rlt.taskId;
            }
            let url = `${
              rlt.appUrl
            }?action=processView&historyTaskId=${taskId}&assigneeId=${
              rlt.assigneeId
            }&appCode=${rlt.appCode}&version=${
              rlt.version
            }&_r=${new Date().getTime()}`;
            this.$root.openModal(url, () => {
              this.fetchData();
            });
          });
        },
      },
    };
  }
}
</script>
